<template>
  <view class="index_container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view class="address_container">
      <u--form
        labelStyle="font-family: 'Microsoft New Tai Lue'; font-size: 34.884rpx "
        labelPosition="left"
        :model="form"
        ref="uForm"
        labelWidth="120px"
      >
        <u-form-item label="聯係人" prop="name" borderBottom ref="item1">
          <u--input
            placeholder="請輸入收貨人名稱"
            placeholderStyle="color: rgba(75, 75, 75, 1)"
            v-model="form.name"
            border="none"
          ></u--input>
        </u-form-item>

        <u-form-item label="性別" prop="name" borderBottom ref="item1">
          <!-- <u--input
            placeholder="请输入内容"
            placeholderStyle="color: rgba(75, 75, 75, 1)"
            v-model="form.name"
            border="none"
          ></u--input> -->
          <u-radio-group v-model="value" placement="row">
            <u-radio activeColor="rgba(247, 154, 77, 1)" label="先生"></u-radio>
            <u-radio
              style="margin-left: 10px"
              activeColor="rgba(247, 154, 77, 1)"
              label="女士"
            ></u-radio>
          </u-radio-group>
        </u-form-item>

        <u-form-item label="手機號" prop="name" borderBottom ref="item1">
          <u--input
            placeholder="請輸入收貨人手機號"
            placeholderStyle="color: rgba(75, 75, 75, 1)"
            v-model="form.name"
            border="none"
          ></u--input>
        </u-form-item>

        <u-form-item label="收貨地址" prop="name" borderBottom ref="item1">
          <u--input
            placeholder="請輸入收貨地址"
            placeholderStyle="color: rgba(75, 75, 75, 1)"
            v-model="form.name"
            border="none"
          ></u--input>
        </u-form-item>

        <u-form-item label="門牌號" prop="name" borderBottom ref="item1">
          <u--input
            placeholder="詳細地址，例1曾101室"
            placeholderStyle="color: rgba(75, 75, 75, 1)"
            v-model="form.name"
            border="none"
          ></u--input>
        </u-form-item>

        <u-form-item label="标签" prop="name" borderBottom ref="item1">
          <view class="form_tag_list">
            <view
              @click="currentIndex = 0"
              :class="currentIndex === 0 ? 'tag_item_active' : 'tag_item'"
              >住家</view
            >
            <view
              @click="currentIndex = 1"
              :class="currentIndex === 1 ? 'tag_item_active' : 'tag_item'"
              style="margin-left: 12px"
              >公司</view
            >
          </view>
        </u-form-item>
      </u--form>
    </view>

    <view class="add_address_btn">保存地址</view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";

export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,

      currentIndex: 0,
      form: {
        name: "",
      },
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #f3f3f3;
}

.index_container {
  //   padding-left: 26.163rpx;
  //   padding-right: 26.163rpx;
}
.address_container {
  padding-left: 52.326rpx;
  padding-right: 52.326rpx;

  ::v-deep {
    .u-form-item__body {
      padding-top: 34.884rpx;
      padding-bottom: 34.884rpx;
    }
  }
}

.add_address_btn {
  width: 523.256rpx;
  height: 83.721rpx;
  border-radius: 33.14rpx;
  background: rgba(247, 154, 77, 1);
  display: flex;
  align-items: center;
  justify-content: center;

//   position: fixed;
//   left: 113.372rpx;
//   bottom: 69.767rpx;
margin-left: 113.372rpx;
margin-top: 104.651rpx;

  font-family: "Microsoft JhengHei";
  font-size: 34.884rpx;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}

.form_tag_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tag_item {
  width: 104.651rpx;
  height: 54.07rpx;
  border-radius: 8.721rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  color: rgba(75, 75, 75, 1);

  border: 0.3px solid rgba(102, 102, 102, 1);
}

.tag_item_active {
  // rgba(247, 154, 77, 1)
  width: 104.651rpx;
  height: 54.07rpx;
  border-radius: 8.721rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  color: rgba(247, 154, 77, 1);

  border: 0.3px solid rgba(247, 154, 77, 1);
}
</style>
